<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .douyinbox {
            background-color: #111;
            height: 130px;
        }

        .douyin {
            position: relative;
            width: 10px;
            height: 55px;
            margin: 0px auto;
            z-index: 1;
            background: #fff;
            filter: drop-shadow(-3px -3px 0 #24f6f0) contrast(150%) brightness(110%);
            box-shadow: 2px 2px 0 0 #fe2d52;
            z-index: 10;
            /* -webkit-animation: move 5s infinite ease-in;
            animation: move 5s infinite ease-in; */
            top: 30px;
        }

        .douyin::before {
            content: "";
            position: absolute;
            width: 25px;
            height: 25px;
            border: 9px solid #fff;
            border-top: 9px solid transparent;
            border-radius: 50%;
            top: 31px;
            left: -34px;
            transform: rotate(45deg);
            filter: drop-shadow(4px 0px 0 #fe2d52);
        }

        .douyin::after {
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            border: 7px solid #fff;
            border-right: 7px solid transparent;
            border-top: 7px solid transparent;
            border-left: 7px solid transparent;
            top: -25px;
            right: -43px;
            border-radius: 100%;
            transform: rotate(45deg);
            z-index: -10;
            filter: drop-shadow(5px 0 0 #fe2d52);
        }
    </style>
</head>

<body>
    <div class="txbox douyinbox">
        <div class="douyin"></div>
    </div>

</body>

</html>